<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康饮食 - 营养分析</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        /* 防止内容溢出 */
        body {
            overflow-x: hidden;
            max-width: 100vw;
        }
        /* 确保所有内容在容器内 */
        .container {
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
        }
    </style>
</head>
<body class="bg-gray-100 text-gray-800 pb-16">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <h1 class="text-xl font-bold text-green-600">营养分析</h1>
            <button class="p-2">
                <i class="fas fa-sliders-h text-gray-600"></i>
            </button>
        </div>
    </header>

    <!-- 时间范围选择器 -->
    <div class="bg-white shadow-sm px-4 py-3 sticky top-0 z-10">
        <div class="flex justify-between items-center">
            <div class="relative">
                <select class="appearance-none bg-gray-100 rounded-full py-2 pl-4 pr-10 focus:outline-none focus:ring-2 focus:ring-green-500">
                    <option>最近7天</option>
                    <option>最近30天</option>
                    <option>本月</option>
                    <option>上月</option>
                    <option>自定义</option>
                </select>
                <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 pointer-events-none"></i>
            </div>
            <div class="flex items-center text-sm">
                <span class="text-gray-500">2023/05/10 - 2023/05/16</span>
                <i class="fas fa-calendar-alt text-green-600 ml-2"></i>
            </div>
        </div>
    </div>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 py-6">
        <!-- 热量摄入卡片 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-lg font-semibold">热量摄入</h2>
                <div class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded-full">
                    平均: 1750 千卡
                </div>
            </div>
            
            <!-- 热量趋势图 -->
            <div class="h-64 mb-3">
                <canvas id="calorieChart"></canvas>
            </div>
            
            <div class="flex justify-between text-sm text-gray-500">
                <div>
                    <div class="text-center">目标</div>
                    <div class="text-center font-medium text-gray-700">2000</div>
                    <div class="text-center">千卡/天</div>
                </div>
                <div>
                    <div class="text-center">平均</div>
                    <div class="text-center font-medium text-green-600">1750</div>
                    <div class="text-center">千卡/天</div>
                </div>
                <div>
                    <div class="text-center">最高</div>
                    <div class="text-center font-medium text-gray-700">2156</div>
                    <div class="text-center">千卡/天</div>
                </div>
                <div>
                    <div class="text-center">最低</div>
                    <div class="text-center font-medium text-gray-700">1486</div>
                    <div class="text-center">千卡/天</div>
                </div>
            </div>
        </div>
        
        <!-- 营养素比例图 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-lg font-semibold">营养素比例</h2>
                <select class="text-sm bg-white border border-gray-200 rounded px-2 py-1">
                    <option>按热量</option>
                    <option>按重量</option>
                </select>
            </div>
            
            <!-- 营养素饼图 -->
            <div class="flex items-center justify-center mb-4">
                <div class="w-48 h-48">
                    <canvas id="nutrientChart"></canvas>
                </div>
            </div>
            
            <div class="grid grid-cols-3 gap-2">
                <div class="flex items-center">
                    <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
                    <div class="text-sm">
                        <div>碳水化合物</div>
                        <div class="text-xs text-gray-500">50% (219g)</div>
                    </div>
                </div>
                <div class="flex items-center">
                    <div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
                    <div class="text-sm">
                        <div>蛋白质</div>
                        <div class="text-xs text-gray-500">25% (109g)</div>
                    </div>
                </div>
                <div class="flex items-center">
                    <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
                    <div class="text-sm">
                        <div>脂肪</div>
                        <div class="text-xs text-gray-500">25% (49g)</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 营养素达标情况 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <h2 class="text-lg font-semibold mb-3">营养素达标情况</h2>
            
            <!-- 蛋白质 -->
            <div class="mb-4">
                <div class="flex justify-between items-center mb-1">
                    <span class="text-sm">蛋白质</span>
                    <span class="text-sm text-gray-500">109g / 100g</span>
                </div>
                <div class="relative pt-1">
                    <div class="overflow-hidden h-2 text-xs flex rounded bg-gray-200">
                        <div style="width: 109%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500"></div>
                    </div>
                </div>
                <div class="flex justify-end">
                    <span class="text-xs text-green-600">已达标 (109%)</span>
                </div>
            </div>
            
            <!-- 膳食纤维 -->
            <div class="mb-4">
                <div class="flex justify-between items-center mb-1">
                    <span class="text-sm">膳食纤维</span>
                    <span class="text-sm text-gray-500">18g / 25g</span>
                </div>
                <div class="relative pt-1">
                    <div class="overflow-hidden h-2 text-xs flex rounded bg-gray-200">
                        <div style="width: 72%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500"></div>
                    </div>
                </div>
                <div class="flex justify-end">
                    <span class="text-xs text-orange-600">接近达标 (72%)</span>
                </div>
            </div>
            
            <!-- 维生素C -->
            <div class="mb-4">
                <div class="flex justify-between items-center mb-1">
                    <span class="text-sm">维生素C</span>
                    <span class="text-sm text-gray-500">63mg / 100mg</span>
                </div>
                <div class="relative pt-1">
                    <div class="overflow-hidden h-2 text-xs flex rounded bg-gray-200">
                        <div style="width: 63%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500"></div>
                    </div>
                </div>
                <div class="flex justify-end">
                    <span class="text-xs text-orange-600">需要提高 (63%)</span>
                </div>
            </div>
            
            <!-- 钙 -->
            <div class="mb-4">
                <div class="flex justify-between items-center mb-1">
                    <span class="text-sm">钙</span>
                    <span class="text-sm text-gray-500">520mg / 800mg</span>
                </div>
                <div class="relative pt-1">
                    <div class="overflow-hidden h-2 text-xs flex rounded bg-gray-200">
                        <div style="width: 65%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500"></div>
                    </div>
                </div>
                <div class="flex justify-end">
                    <span class="text-xs text-orange-600">需要提高 (65%)</span>
                </div>
            </div>
            
            <!-- 铁 -->
            <div>
                <div class="flex justify-between items-center mb-1">
                    <span class="text-sm">铁</span>
                    <span class="text-sm text-gray-500">12mg / 12mg</span>
                </div>
                <div class="relative pt-1">
                    <div class="overflow-hidden h-2 text-xs flex rounded bg-gray-200">
                        <div style="width: 100%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500"></div>
                    </div>
                </div>
                <div class="flex justify-end">
                    <span class="text-xs text-green-600">已达标 (100%)</span>
                </div>
            </div>
            
            <button class="mt-3 text-green-600 flex items-center">
                <span>查看更多营养素</span>
                <i class="fas fa-chevron-right ml-1"></i>
            </button>
        </div>
        
        <!-- 饮食习惯 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <h2 class="text-lg font-semibold mb-3">饮食习惯分析</h2>
            
            <div class="mb-4">
                <div class="flex items-center mb-2">
                    <div class="bg-green-100 p-2 rounded-full mr-3">
                        <i class="fas fa-check text-green-600"></i>
                    </div>
                    <div>
                        <h3 class="font-medium">蛋白质摄入充足</h3>
                        <p class="text-sm text-gray-600">您的蛋白质摄入达到了推荐水平，有助于肌肉维护和修复。</p>
                    </div>
                </div>
            </div>
            
            <div class="mb-4">
                <div class="flex items-center mb-2">
                    <div class="bg-yellow-100 p-2 rounded-full mr-3">
                        <i class="fas fa-exclamation text-yellow-600"></i>
                    </div>
                    <div>
                        <h3 class="font-medium">水果摄入不足</h3>
                        <p class="text-sm text-gray-600">您的水果摄入低于推荐量，可能导致维生素摄入不足。</p>
                    </div>
                </div>
            </div>
            
            <div>
                <div class="flex items-center mb-2">
                    <div class="bg-red-100 p-2 rounded-full mr-3">
                        <i class="fas fa-times text-red-600"></i>
                    </div>
                    <div>
                        <h3 class="font-medium">饱和脂肪偏高</h3>
                        <p class="text-sm text-gray-600">您的饱和脂肪摄入高于推荐水平，建议减少肉类和加工食品的摄入。</p>
                    </div>
                </div>
            </div>
            
            <button class="mt-3 text-green-600 w-full py-2 border border-green-600 rounded-lg">
                查看详细分析报告
            </button>
        </div>
        
        <!-- 营养建议 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-lg font-semibold">个性化建议</h2>
                <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">3条新建议</span>
            </div>
            
            <!-- 建议卡片1 -->
            <div class="border-l-4 border-green-500 bg-green-50 p-3 mb-3 rounded-r-lg">
                <h3 class="font-medium mb-1">增加膳食纤维的摄入</h3>
                <p class="text-sm text-gray-600 mb-2">您的膳食纤维摄入略低于推荐水平。尝试增加全谷物、豆类和蔬菜的摄入。</p>
                <div class="flex flex-wrap gap-2">
                    <span class="bg-white px-2 py-1 rounded text-xs">全麦面包</span>
                    <span class="bg-white px-2 py-1 rounded text-xs">燕麦</span>
                    <span class="bg-white px-2 py-1 rounded text-xs">扁豆</span>
                    <span class="bg-white px-2 py-1 rounded text-xs">西兰花</span>
                </div>
            </div>
            
            <!-- 建议卡片2 -->
            <div class="border-l-4 border-blue-500 bg-blue-50 p-3 mb-3 rounded-r-lg">
                <h3 class="font-medium mb-1">补充维生素C</h3>
                <p class="text-sm text-gray-600 mb-2">您的维生素C摄入处于中等水平。可以每天食用更多新鲜水果和蔬菜来增加摄入。</p>
                <div class="flex flex-wrap gap-2">
                    <span class="bg-white px-2 py-1 rounded text-xs">橙子</span>
                    <span class="bg-white px-2 py-1 rounded text-xs">猕猴桃</span>
                    <span class="bg-white px-2 py-1 rounded text-xs">草莓</span>
                    <span class="bg-white px-2 py-1 rounded text-xs">菠菜</span>
                </div>
            </div>
            
            <!-- 建议卡片3 -->
            <div class="border-l-4 border-orange-500 bg-orange-50 p-3 rounded-r-lg">
                <h3 class="font-medium mb-1">减少饱和脂肪的摄入</h3>
                <p class="text-sm text-gray-600 mb-2">您的饱和脂肪摄入高于推荐水平。尝试选择瘦肉、植物油，并减少加工食品的摄入。</p>
                <div class="flex flex-wrap gap-2">
                    <span class="bg-white px-2 py-1 rounded text-xs">鸡胸肉</span>
                    <span class="bg-white px-2 py-1 rounded text-xs">鱼类</span>
                    <span class="bg-white px-2 py-1 rounded text-xs">橄榄油</span>
                    <span class="bg-white px-2 py-1 rounded text-xs">坚果</span>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部导航栏 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="flex justify-around items-center py-2">
            <a href="index.html" class="flex flex-col items-center p-2 text-gray-500">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="food-search.html" class="flex flex-col items-center p-2 text-gray-500">
                <i class="fas fa-search text-xl"></i>
                <span class="text-xs mt-1">搜索</span>
            </a>
            <a href="#" class="flex flex-col items-center p-2 text-green-600">
                <i class="fas fa-chart-pie text-xl"></i>
                <span class="text-xs mt-1">分析</span>
            </a>
            <a href="#" class="flex flex-col items-center p-2 text-gray-500">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </footer>

    <script>
        // 热量趋势图
        const calorieCtx = document.getElementById('calorieChart').getContext('2d');
        const calorieChart = new Chart(calorieCtx, {
            type: 'line',
            data: {
                labels: ['5/10', '5/11', '5/12', '5/13', '5/14', '5/15', '5/16'],
                datasets: [{
                    label: '热量摄入',
                    data: [1650, 1820, 1486, 1750, 2156, 1705, 1689],
                    backgroundColor: 'rgba(76, 175, 80, 0.2)',
                    borderColor: 'rgba(76, 175, 80, 1)',
                    borderWidth: 2,
                    tension: 0.3,
                    pointBackgroundColor: 'rgba(76, 175, 80, 1)'
                }, {
                    label: '目标热量',
                    data: [2000, 2000, 2000, 2000, 2000, 2000, 2000],
                    borderColor: 'rgba(180, 180, 180, 0.7)',
                    borderWidth: 2,
                    borderDash: [5, 5],
                    fill: false,
                    pointRadius: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: false,
                        min: 1000,
                        ticks: {
                            stepSize: 500
                        }
                    }
                }
            }
        });
        
        // 营养素比例图
        const nutrientCtx = document.getElementById('nutrientChart').getContext('2d');
        const nutrientChart = new Chart(nutrientCtx, {
            type: 'doughnut',
            data: {
                labels: ['碳水化合物', '蛋白质', '脂肪'],
                datasets: [{
                    data: [50, 25, 25],
                    backgroundColor: ['#ECC94B', '#4299E1', '#F56565'],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '70%'
            }
        });
    </script>
</body>
</html> 